<template>
  <div class="loginClass">
    <el-form ref="submit" :rules="rules" :model="submitQuery">
      <el-card class="login_box_card" shadow="hover">
        <h3>必推科技</h3>
        <el-tabs v-model="activeName">
          <el-tab-pane label="登录" name="登录">
            <div class="login_box_card_login">
              <el-form-item prop="userName">
                <el-input
                  placeholder="用户名"
                  prefix-icon="el-icon-user"
                  v-model="submitQuery.userName"
                >
                </el-input>
              </el-form-item>

              <el-form-item prop="passWord">
                <el-input
                  placeholder="密码"
                  prefix-icon="el-icon-lock"
                  v-model="submitQuery.passWord"
                  show-password
                >
                </el-input>
              </el-form-item>

              <el-button type="primary" @click="submitForm('submit')"
                >登录</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="注册" name="注册">配置管理</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { login } from "@/api/login";
export default {
  data() {
    return {
      activeName: "登录",
      submitQuery: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const dt = await login(this.submitQuery);
          if (dt.status === 200) {
            sessionStorage.setItem("token", dt.data.token);
            this.$router.push("/");
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.loginClass {
  width: 100%;
  height: 100%;
  background-color: rgb(29, 56, 114);
}

.login_box_card {
  width: 500px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login_box_card_login {
  padding-top: 20px;
  box-sizing: border-box;
}

.el-button--primary {
  width: 100%;
}
</style>
